body,h1,img {
	margin: 0;
	padding: 0;
}
.ark-bg {
	z-index: 100;
	position: fixed;
	background-color: #222;
	width: 100%;
	height: 100%;
	animation: goDisapear .25s 1.5s forwards,  goScale .25s 1.5s forwards;
}

@keyframes goDisapear {
	100% {
		opacity: 0;
	}
}

.ark-bluebg {
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	background-color: rgb(77, 109, 227);
	width: 100%;
	height: 93%;
	top: 50%;
	transform: translateY(-50%);
}

.ark-pinkbg {
	z-index: 300;
	width: 30%;
	height: 100%;
	background-color: rgb(217, 54, 115);
	animation: goFlat .5s forwards, goSpread .5s 1s forwards;
}

@keyframes goFlat{
	0% {
		width: 30%;
		height: 100%;
	}
	100% {
		width: 100%;
		height: 30%;
	}
}


@keyframes goSpread{
	0% {
		height: 30%;
	}
	100% {
		height: 100%;
	}
}


@keyframes goScale{
	100% {
		transform: scale(1.4);
	}
}

.ark-icon {
	z-index: 400;
	position: absolute;
	width: 20%;	
	animation: iconUp .25s .5s forwards;
}

@keyframes iconUp {
	100% {
		margin-top: -30vh;
	}
}

.ark-rein {
	z-index: 400;
	position: absolute;
	width: 50%;
	opacity: 0;
	animation: reinDown .25s .5s forwards;
}

@keyframes reinDown {
	0% {
		margin-top: -30%;
		opacity: 0;
	}
	100% {
		margin-top: 0;
		opacity: 1;
	}
}